<template>
	<view class="container">
		<view class="banner">
			<image src="/static/img/cbxx_banner.jpg" mode="widthFix"></image>
		</view>
		<template v-if="!state.noneShow">
			<view class="user">
				<view class="content">
					<view>船名：</view>
					<text>{{state.info.vesselname}}</text>
				</view>
				<view class="content">
					<view>建造时间：</view>
					<text>{{state.info.buildtime}}</text>
				</view>
				<view class="content">
					<view>呼号：</view>
					<text>{{state.info.callsign}}</text>
				</view>
				<view class="content">
					<view>总吨：</view>
					<text>{{state.info.tonnage}}</text>
				</view>
				<view class="content">
					<view>MMSI：</view>
					<text>{{state.info.mmsi}}</text>
				</view>
				<view class="content">
					<view>船龄：</view>
					<text>{{state.info.age}}</text>
				</view>
				<view class="content">
					<view>IMO：</view>
					<text>{{state.info.imo}}</text>
				</view>
			</view>
			<view class="user">
				<view class="content">
					<view>船籍：</view>
					<text>{{state.info.flagctry}}</text>
				</view>
				<view class="content">
					<view>类型：</view>
					<text>{{state.info.vesseltype}}</text>
				</view>
				<!-- <view class="content">
					<view>状态：</view>
					<text>{{state.info.status}}</text>
				</view> -->
				<view class="content">
					<view>船长：</view>
					<text>{{state.info.length}}</text>
				</view>
				<view class="content">
					<view>船宽：</view>
					<text>{{state.info.breadth}}</text>
				</view>
				<!-- <view class="content">
					<view>吃水：</view>
					<text>{{state.info.draught}}</text>
				</view> -->
			</view>
			<view class="btn">
				<u-button @click="gotoSalary(state.info)" type="primary">查看薪资</u-button>
			</view>
			<view class="footer">
				<button class="footer_left" @click="gotopay">
					<image src="/static/img/guzhang.png" mode="widthFix"></image>
				</button>
				<button class="footer_right" @click="gotojianli">
					<image src="/static/img/xihuan.png" mode="widthFix"></image>
				</button>
			</view>
		</template>
		<view class="none_box" v-else>
			<u-empty text="未查询到相关数据，请重新检查检索信息是否正确！" mode="list"></u-empty>
		</view>
	</view>

	<Tabbar :value="-1" />
</template>

<script setup lang="ts">
	import Tabbar from '@/components/tabbar.vue'
	import { reactive } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
	import { shipInfo } from '@/common/api.js'
	const modal = reactive({
		title: '温馨提示',
		content: '提交成功！我们将会在7个工作日内 审核完成，审核通过后才会显示。',
		show: false,
	})
	const state = reactive({
		code: '',
		id: '',
		info: {},
		noneShow: false,
	})
	const gotojianli = async () => {
		if (!uni.getStorageSync('userinfo')) {
			uni.showToast({
				title: '请您先登录系统',
				icon: 'none'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/tabbar/mine/mine'
				})
			}, 1500)
		} else {
			uni.navigateTo({
				url: '/pages/mine/resume/resume'
			})
		}
	}
	const gotopay = () => {
		if (!uni.getStorageSync('userinfo')) {
			uni.showToast({
				title: '请您先登录系统',
				icon: 'none'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/tabbar/mine/mine'
				})
			}, 1500)
		} else {
			uni.navigateTo({
				url: `/pages/payExplosion/payExplosion?info=${encodeURIComponent(JSON.stringify(state.info))}`
			})
		}
	}
	const gotoSalary = (item) => {
		if (!uni.getStorageSync('userinfo')) {
			uni.showToast({
				title: '请您先登录系统',
				icon: 'none'
			})
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/tabbar/mine/mine'
				})
			}, 1500)
		} else {
			if (!item.isExposure) {
				uni.$u.toast('请您先爆工资后查看')
				return
			}
			uni.navigateTo({
				url: `/pages/salary/salary?id=${item.id}`
			})
		}

	}

	const save = () => {
		modal.show = true
	}
	const removeAsterisks = (str) => {
		return str.replace(/\*/g, '');
	}
	onShareAppMessage((res) => {
		return {
			title: removeAsterisks(state.info?.vesselname ?? '海员薪资行情') + '的船员工资'
		}
	})
	onShareTimeline((res) => {
		return {
			title: removeAsterisks(state.info?.vesselname ?? '海员薪资行情') + '的船员工资'
		}
	})
	onLoad((o) => {
		state.code = o.code
		state.id = o.id
		
		getInfo()
	})
	const getInfo = async () => {
		let params : {
			code ?: string;
			id ?: string;
		} = {}
		if (state.code) {
			params.code = state.code
		}
		if (state.id) {
			params.id = state.id
		}
		shipInfo(params).then(res => {
			console.log('报错内容', res)
			if (res.data) {
				state.info = res.data
				uni.setNavigationBarTitle({
					title: removeAsterisks(state.info?.vesselname ?? '海员薪资行情') + '的船员工资'
				})
			} else {
				state.noneShow = true
				uni.showToast({
					title: '未查询到相关数据，请重新检查检索信息是否正确！',
					icon: 'none',
					duration: 3000
				})
			}
			
		}).catch(err => {
			console.log(err)
			state.noneShow = true
			uni.showToast({
				title: '未查询到相关数据，请重新检查检索信息是否正确！',
				icon: 'none',
				duration: 3000
			})
		})

	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		position: relative;
		width: 750rpx;
		height: 100%;
		padding: 20rpx 35rpx 20rpx;
		box-sizing: border-box;
		overflow: auto;

		.banner {
			width: 100%;

			image {
				width: 100%;
			}
		}

		.user {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;
		}

		.content {
			width: 50%;
			padding: 10rpx 0;
			display: flex;
			font-size: 30rpx;
			color: #282828;
			box-sizing: border-box;

			>view {
				white-space: nowrap;
			}

			.label {
				width: 230rpx;
				text-align: right;
			}

			.value {
				width: 100%;
			}

			:deep().u-upload__button {
				background-color: #fff;
				border: 2rpx solid #282828;
			}

			:deep().u-input {
				flex: 1;
				border-radius: 8rpx;
				border: 2rpx solid #282828;
			}
		}

		.footer {
			display: flex;
			align-items: center;
			justify-content: space-around;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			button {
				margin: 0;
				border: 0;
				padding: 0;

				&::after {
					border: none;
				}
			}
		}

		.btn {
			width: 160rpx;
			margin: 0 auto;
			padding: 20rpx 0;
		}

		.none_box {
			height: 600rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
</style>